<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8" />
<meta name="keywords" content="" />
<meta name="description" content="" />
<title></title>
<style>
  .v-leave, .v-leave-to{
    transform: translateX(0);
    opacity: 1;
  }
  .v-leave-active, .v-enter-active{
    transition: 2s all;
    
  }
  .v-leave-to,.v-enter{
    transform: translateX(100px);
    opacity: 0;
    
  }

  .Moving-leave-active{
    animation:move 2s linear ;
  }

  .Moving-enter-active{
        /* name 运动的持续时间  匀速  反向旋转 */
    animation:move 2s linear reverse;
  }

  /* 定义关键帧动画   移动动画*/
  @keyframes move{
    0%{
      opacity: 1;
      transform: translateX(0);
    }
    50%{
      opacity: 1;
      transform: translateX(100px);

    }
    100%{
      opacity: 0;
      transform: translateX(200px);

    }
  }

</style>
</head>
<body>
  <div id="app">
    <!-- 
            Vue提供内置元素，给内部子元素添加过渡&动画效果（实际上给元素添加了类名）

              enter 从隐藏到显示
                v-enter (刚开始)
                v-enter-active (中间)
                v-enter-to (结束)

              leave 从显示到隐藏
                v-leave (刚开始) 
                v-leave-active (中间)
                v-leave-to (结束)
          -->
    
    <!-- <p v-show="text">啦啦啦啦啦啦啦</p> -->
    <button @click="text = !text">按钮</button>
    <transition>
      <p v-if="text">清漪真漂亮 transition</p>
    </transition>

    <transition name="Moving">
      <p v-if="text">清漪真漂亮 animation</tr></p>
    </transition>

    <!-- 点击按钮让元素消失 -->
    
  </div>
  <script src="./js/vue.js"></script>
  <script>
    const vm = new Vue({
      data:{
        text:true,
      }
    });
    vm.$mount("#app");
  </script>
</body>
</html>